<template>
	<view class="informationPage_main">
		<view class="information_top_types">
			<view class="information_top_type_per" v-for="item in informationTopTypesList" :key="item.typeId">
				<view class="information_type_image">
					<image :src="item.coverImg" mode="aspectFill" class="information_type_coverImg"></image>
				</view>
				<view class="information_top_type_name">
					{{item.typeName}}
				</view>
			</view>
		</view>
		<view class="divider_view"></view>
		<view class="information_bottom_types">
			<view class="information_other_per" v-for="(item,index) in otherInfors" :key="item.otherInforTypeId">
				<view class="other_info_text_ixon">
					<view class="other_info_text">
						{{item.otherInforTypeName}}
					</view>
					<view class="other_info_icon">
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="other_info_images">
					<view class="column_one">
						<view class="column_one_per" v-for="(coverImage,index) in item.otherCoverImgs.slice(0,2)" :key="index">
							<image :src="coverImage" mode="aspectFill" class="column_one_image"></image>
						</view>
					</view>
					<view class="column_two">
						<view class="column_two_per1" v-if="item.otherCoverImgs[2]">
							<image :src="item.otherCoverImgs[2]" mode="aspectFill" class="column_two_image1"></image>
						</view>
						<view class="column_two_per2" v-if="item.otherCoverImgs[3]">
							<image :src="item.otherCoverImgs[3]" mode="aspectFill" class="column_two_image2"></image>
						</view>
						<view class="column_two_per3" v-if="item.otherCoverImgs[4]">
							<image :src="item.otherCoverImgs[4]" mode="aspectFill" class="column_two_image3"></image>
						</view>
					</view>
					<view class="column_three">
						<view class="column_three_per" v-for="(rowThreeImage,index) in item.otherCoverImgs.slice(5,7)"
							:key="index">
							<image :src="rowThreeImage" mode="aspectFill" class="column_three_image"></image>
						</view>
					</view>
				</view>
				<view class="divider_view" v-if="index < otherInfors.length - 1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				informationTopTypesList: [{
						typeId: 1,
						typeName: '精选商品',
						coverImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi1%2F1816069805%2FO1CN01M9UVvF2MIk401efi1_%21%211816069805.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1732689899&t=112cb1e4f56b758a5259f1bb39c191ba'
					},
					{
						typeId: 2,
						typeName: '退货无忧',
						coverImg: 'https://img2.baidu.com/it/u=235912598,1503013827&fm=253&fmt=auto&app=138&f=JPEG?w=420&h=300'
					},
					{
						typeId: 3,
						typeName: '用车无忧',
						coverImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01Eu2hb421jfedRor10_%21%212216170297021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1732690078&t=b7fb31a70fa2cd6dce161c2bb5d5a29c'
					},
					{
						typeId: 4,
						typeName: '智能应用',
						coverImg: 'https://img2.baidu.com/it/u=624988640,2404601198&fm=253&fmt=auto&app=120&f=JPEG?w=914&h=500'
					},
					{
						typeId: 5,
						typeName: '购物指南',
						coverImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F449e57f2-9da0-4fcc-bf97-b449782cd245%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1732690185&t=86ed34cb84b8f3e2398dca3b2f8f43aa'
					},
					{
						typeId: 6,
						typeName: '疆屿中心',
						coverImg: 'https://img1.baidu.com/it/u=2944301446,2300085316&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'
					},
					{
						typeId: 7,
						typeName: '用户成长',
						coverImg: 'https://img1.baidu.com/it/u=2158129451,2100722212&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=300'
					},
					{
						typeId: 8,
						typeName: '了解疆屿',
						coverImg: 'https://img1.baidu.com/it/u=2696023237,892522713&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750'
					},
					{
						typeId: 9,
						typeName: '购物百宝箱',
						coverImg: 'https://preview.qiantucdn.com/paixin/28/94/65/10x58PIC4458PICq4xA3CAcQU_PIC2018.jpg%21w1024_new_small'
					},
				],
				otherInfors: [{
						otherInforTypeId: 1,
						otherInforTypeName: '本店商品美图合集',
						otherCoverImgs: [
							'https://img2.baidu.com/it/u=74852891,3944189454&fm=253&fmt=auto&app=138&f=JPEG?w=669&h=500',
							'https://img0.baidu.com/it/u=3749404169,3428955615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
							'https://img01.yzcdn.cn/upload_files/2017/10/14/FtLi0cW-zE7q1GKTqfHDG2wLOykg.jpg%21middle.jpg',
							'https://img0.baidu.com/it/u=2069293901,1705801767&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
							'https://img1.baidu.com/it/u=853794936,3526133784&fm=253&fmt=auto&app=138&f=JPEG?w=520&h=293',
							'https://img1.baidu.com/it/u=1197730722,3488901921&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
							'https://img0.baidu.com/it/u=879138400,2920141429&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500'
						]
					},
					{
						otherInforTypeId: 2,
						otherInforTypeName: '最新山地车资讯指南',
						otherCoverImgs: [
							'https://img2.baidu.com/it/u=1337995049,310472147&fm=253&fmt=auto&app=120&f=JPEG?w=751&h=500',
							'https://img0.baidu.com/it/u=964182494,1772172284&fm=253&fmt=auto&app=138&f=JPEG?w=916&h=800',
							'https://img1.baidu.com/it/u=950072073,335806404&fm=253&fmt=auto?w=500&h=666',
							'https://img0.baidu.com/it/u=2842989898,1733567371&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069',
							'https://img0.baidu.com/it/u=2070182388,1430749707&fm=253&fmt=auto&app=138&f=JPEG?w=521&h=500',
							'https://b0.bdstatic.com/31238ec1fb0e8f7fcf5f3bd691d762ff.jpg',
							'https://b0.bdstatic.com/974b9722007399076bfc70d0cbb99c5f.jpg@h_1280'
						]
					},
					{
						otherInforTypeId: 3,
						otherInforTypeName: '创意艺术馆',
						otherCoverImgs: [
							'https://img0.baidu.com/it/u=2341144834,3175267236&fm=253&fmt=auto&app=120&f=JPEG?w=617&h=411',
							'https://n.sinaimg.cn/sinacn10108/213/w2048h1365/20181229/a424-hqwsysy8870491.jpg',
							'https://img0.baidu.com/it/u=1551998116,642969302&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
							'https://pic.rmb.bdstatic.com/bjh/cc7c607af24ea5a5eb8fcba6b6080d28.png',
							'https://img2.baidu.com/it/u=2148097462,2561278743&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=480',
							'https://img0.baidu.com/it/u=1218858546,1408888025&fm=253&fmt=auto?w=607&h=405',
							'https://img1.baidu.com/it/u=1697823714,3582616896&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=354'
						]
					},
					{
						otherInforTypeId: 4,
						otherInforTypeName: '疆屿蔚来方向与服务',
						otherCoverImgs: [
							'https://img0.baidu.com/it/u=3940277641,4095882545&fm=253&fmt=auto&app=138&f=JPG?w=652&h=500',
							'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0924%2F193660e7j00s1hab300btc000fi00adm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
							'http://t15.baidu.com/it/u=1194305479,3347956488&fm=224&app=112&f=JPEG?w=500&h=500',
							'http://t13.baidu.com/it/u=2607023854,2026974261&fm=224&app=112&f=JPEG?w=500&h=500',
							'http://t13.baidu.com/it/u=4262785848,2715146520&fm=224&app=112&f=JPEG?w=500&h=500',
							'http://t14.baidu.com/it/u=1045032040,357113040&fm=224&app=112&f=JPEG?w=500&h=500',
							'http://t15.baidu.com/it/u=1617283062,3604734927&fm=224&app=112&f=JPEG?w=375&h=500'
						]
					},
				]
			}
		},
		
		methods: {

		}
	}
</script>

<style scoped>
	.informationPage_main {
		padding-left: 10px;
		padding-right: 10px;
	}

	.information_top_types {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.information_type_coverImg {
		width: 200rpx;
		height: 200rpx;
	}

	.information_top_type_per {
		margin-top: 20px;
	}

	.information_top_type_name {
		font-size: 13px;
		margin-top: 7px;
		letter-spacing: 2px;
		font-family: cursive;
	}

	.divider_view {
		margin-top: 30px;
		margin-bottom: 30px;
		width: 100%;
		border-top: 1px solid #d9e2e2;
	}

	.other_info_text_ixon {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 20px;
		margin-top: 40px;
	}

	.other_info_text {
		font-size: 18px;
		letter-spacing: 1px;
		font-family: hongLeiXingShu;
	}
	.other_info_images{
		width: 100%;
		height: 320px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.column_one_image{
		width: 95px;   
		height: 157px;
	}
	.column_three_image{
		width: 95px;
		height: 157px;
	}
	.column_one{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.column_three{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.column_two{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.column_two_image1{
		width: 95px;
		height: 88px;
	}
	.column_two_image2{
		width: 95px;
		height: 150px;
	}
	.column_two_image3{
		width: 95px;
		height: 78px;
	}

</style>